<template>
  <content-wrap>
    <div class="flex justify-between">
      <el-form
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="90px"
        label-position="left"
      >
        <el-form-item label="充值类型:" prop="rechargeType">
          <el-select clearable v-model="queryParams.rechargeType" placeholder="请选择充值类型">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" plain @click="handleQuery"
            ><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button
          >
          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="list" style="width: 100%">
      <el-table-column prop="targetTenantName" label="客户"> </el-table-column>

      <el-table-column prop="rechargeType" label="充值类型">
        <template #default="scope">
          <el-tag type="primary" plan> {{ typeMap[scope.row.rechargeType] }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="rechargeAmount" label="充值金额"> </el-table-column>
      <el-table-column prop="rechargeNum" label="充值数量"> </el-table-column>
      <el-table-column prop="attachment" label="附件">
        <template #default="scope">
          <div>
            <el-image
              v-if="scope.row.attachment"
              :src="scope.row.attachment"
              class="w-240px h-360px"
            ></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注"> </el-table-column>
      <el-table-column label="处理进度" align="center" prop="handleStatus" width="150px">
        <template #default="scope">
          <el-tag :type="scope.row.handleStatus == 0 ? 'info' : 'success'">{{
            scope.row.handleStatus == 0 ? '待处理' : '已处理'
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作人" align="center" prop="operatorName" width="150px" />
      <el-table-column
        label="创建时间"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
      />
    </el-table>
    <Pagination
      v-model:limit="queryParams.pageSize"
      v-model:page="queryParams.pageNo"
      :total="total"
      @pagination="getList"
    />
  </content-wrap>
</template>

<script setup>
import * as proxyApi from '@/api/home/proxy.ts'
import Apeningapplication from './Apeningapplication.vue'
import { dateFormatter } from '@/utils/formatTime'
const list = ref([])
const total = ref(0)
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  corpName: '',
  contactName: '',
  contactMobile: '',
  callChannel: ''
})
const typeMap = {
  1: '点呼话费',
  2: '群呼话费',
  3: '坐席',
  4: '企业领取上限扩容'
}

const options = [
  {
    label: '点呼话费',
    value: 1
  },
  {
    label: '群呼话费',
    value: 2
  },
  {
    label: '坐席',
    value: 3
  },
  {
    label: '企业领取上限扩容',
    value: 4
  }
]
/**列表*/
const getList = async () => {
  const data = await proxyApi.rechargePage(queryParams)
  list.value = data.list
  total.value = data.total
}
/**搜索*/
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}
/**重置*/
const resetQuery = () => {
  queryParams.pageNo = 1
  queryParams.corpName = ''
  queryParams.contactName = ''
  queryParams.contactMobile = ''
  queryParams.callChannel = ''
  getList()
}
onMounted(() => {
  getList()
})

defineExpose({ getList })
/**删除*/
const del = () => {}
</script>

<style lang="scss" scoped></style>
